<template>
	<div>
		<van-nav-bar
			:title="title" 
			:fixed="true" 
			left-arrow 
			@click-left="onClickLeft" 
		/>
		<div class="tongzhi">
			<van-cell title="甜甜圈消息" class="iconfont icon-daipingjia" @click="message"/>
			<van-cell title="五色糖官方" class="iconfont icon-guanfan" @click="official"/>
			<van-cell title="通知消息" class="iconfont icon-tongzhigonggaotixing
" @click="inform"/>
			<van-cell title="私信" class="iconfont icon-haoyousixin" @click="conversation"/>
		</div>
	</div>
</template>

<script>
	export default{
		name:"Tongzhi",
		data(){
			return {
				title: "通知",
			}
		},
		methods:{
			onClickLeft(){
				this.$router.go(-1)
			},
			message(){
				this.$router.push('/message')
			},
			official(){
				this.$router.push('/official')
			},
			inform(){
				this.$router.push('/inform')
			},
			conversation(){
				this.$router.push('/conversation')
			}
		}
	}
</script>

<style scoped="">
	.van-nav-bar__title {
	  color: #fff;
	  font-size: 14px;
	}
	
	.van-nav-bar {
	  height: 46px;
	  background: #d46170;
	}
	
	.van-icon,
	.van-icon::before {
	  color: #FFF;
	  font-size: 12px;
	}
	.tongzhi{
		margin-top: 46px;
	}
	.van-cell{height: 60px;}
	.van-cell__title span{font-size: 13px;margin-left: 20px;line-height: 40px;}
	.icon-daipingjia:before,.icon-guanfan:before,.icon-tongzhigonggaotixing:before,.icon-haoyousixin:before{font-size: 22px; width: 45px;height: 45px;background: #eff3f6; color: #b64955;text-align: center;line-height: 45px;border-radius: 50%;}
</style>
